<template>
	<NavBarVue title="个性标签" />
	<view class="label">
		<view class="top">
			<view class="top_h1">选择兴趣标签</view>
			<view class="top_p">优先推送符合以下兴标签内容</view>
		</view>
		<view class="labs">
			<view class="labs_details" v-for="(value, keyName) in tagLibraryStore.contentTagList.userList" :key="keyName">
				<view class="h2">
					{{keyName}}
				</view>
				<view class="labs_ul">
					<view class="labs_li" v-for="(val,index2) in value" :key="index2" :class="{active: val.tagLibraryBO.userSelected}"
						@click="click(keyName,index2)">
						{{val?.tagLibraryBO?.tagName}}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<button class="btn" @click="complete">完成</button>
		</view>
		<TabBarVue />
	</view>
</template>

<script setup>
	import TabBarVue from "../../../components/TabBar.vue";
	import NavBarVue from "../../../components/NavBar.vue";
	import {
		onMounted,
		reactive,
		ref
	} from "vue"
	import {
		useTagLibraryStore
	} from '../../../store'

	const tagLibraryStore = useTagLibraryStore()

	let activeList = reactive({})
	// 点击高亮
	const click = (keyName, idx) => {
		 tagLibraryStore.contentTagList.userList[keyName][idx].tagLibraryBO.userSelected = !tagLibraryStore.contentTagList.userList[keyName][idx].tagLibraryBO.userSelected
	}
	onMounted(async () => {
		await tagLibraryStore.userList()
		await tagLibraryStore.articleList()
	})
	
	// 完成
	const complete = async () => {
		const userList = tagLibraryStore.contentTagList.userList
		const tagIds = Object.keys(userList).reduce((prev, keyName) => {
			return prev.concat(userList[keyName].filter((v) => v.tagLibraryBO.userSelected))
		}, []).map(v => v.tagLibraryBO.id).join(',')
		const res = await tagLibraryStore.userTag({
			tagIds
		})
		uni.showModal({
			content: "保存成功",
			showCancel: false,
			success() {
				uni.switchTab({
					url: "/pages/tab-index/index"
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.label {

		.top {
			.top_h1 {
				color: rgb(254, 84, 107);
				font-size: 40rpx;
				font-weight: bold;
				padding: 30rpx 20rpx 10rpx;


			}

			.top_p {
				color: #aaa;
				font-size: 24rpx;
				padding: 10rpx 20rpx 30rpx;

			}

			border-bottom: 1px solid #eee;
		}

		.labs {
			padding: 0rpx 20rpx 252rpx;
			// font-family: "宋体";
			.h2 {
				font-weight: bold;
				padding: 50rpx 20rpx 0rpx;
				font-size: 30rpx;

			}

			.labs_ul {
				display: flex;
				flex-wrap: wrap;
				color: #aaa;
				font-size: 30rpx;
				margin-top: 20rpx;

				.labs_li {
					background-color: rgb(247, 247, 247);
					padding: 18rpx 25rpx;
					margin: 12rpx;
				}

				.active {
					color: white;
					background-color: rgb(254, 84, 107);
				}
			}
		}

		.bottom {
			width: 100vw;
			padding: 0rpx 20rpx;
			position: fixed;
			bottom: 80px;
			left: 0rpx;
			box-sizing: border-box;
			.btn {
				background-color: rgb(254, 84, 107);
				color: white;
				padding: 0rpx;
			}
		}
	}
</style>